<!-- eslint-disable vue/valid-v-slot -->
<template>
  <div class="main-container">
    <TableBody>
      <template #header>
        <TableHeader ref="tableHeaderRef" :show-filter="false">
          <template #search-content>
            <a-form ref="seachForm" :model="form">
              <a-row :gutter="24">
                <a-col :span="4">
                  <a-form-item field="id" hide-label>
                    <a-input
                      class="width100"
                      v-model="form.id"
                      placeholder="请输入工单ID"
                      allow-clear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="title" hide-label>
                    <a-input
                      class="width100"
                      v-model="form.title"
                      placeholder="请输入工单标题"
                      allow-clear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="systemName" hide-label>
                    <a-input
                      class="width100"
                      v-model="form.systemName"
                      placeholder="请输入系统名称"
                      allow-clear
                    />
                  </a-form-item>
                </a-col>

                <a-col :span="4">
                  <a-form-item hide-label field="state">
                    <a-select
                      class="width100"
                      v-model="form.state"
                      placeholder="请选择工单状态"
                      allow-clear
                    >
                      <a-option
                        v-for="(item, index) in treeData.list"
                        :key="index"
                        :value="item.type"
                        >{{ item.name }}</a-option
                      >
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item hide-label field="typeId">
                    <a-select
                      class="width100"
                      v-model="form.typeId"
                      placeholder="请选择工单类型"
                      allow-clear
                    >
                      <a-option
                        v-for="(item, index) in treeData.typeList"
                        :key="index"
                        :value="item.id"
                        >{{ item.name }}</a-option
                      >
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="createTime" hide-label>
                    <a-date-picker
                      v-model="form.createTime"
                      show-time
                      class="width100"
                      allow-clear
                      :disabledDate="changeTraceEnd"
                      placeholder="请选择开始创建时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.createTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endCreateTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.createTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endCreateTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.createTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endCreateTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.createTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endCreateTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.createTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endCreateTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endCreateTime" hide-label>
                    <a-date-picker
                      class="width100"
                      v-model="form.endCreateTime"
                      show-time
                      allow-clear
                      :disabledDate="changeTraceStart"
                      placeholder="请选择结束创建时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.createTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endCreateTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.createTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endCreateTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.createTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endCreateTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.createTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endCreateTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.createTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endCreateTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="handlerTime" hide-label>
                    <a-date-picker
                      v-model="form.handlerTime"
                      show-time
                      class="width100"
                      allow-clear
                      :disabledDate="changeTraceEnd"
                      placeholder="请选择开始处理时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.handlerTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endHandlerTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.handlerTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endHandlerTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.handlerTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endHandlerTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.handlerTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endHandlerTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.handlerTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endHandlerTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endHandlerTime" hide-label>
                    <a-date-picker
                      class="width100"
                      v-model="form.endHandlerTime"
                      show-time
                      allow-clear
                      :disabledDate="changeTraceStart"
                      placeholder="请选择结束处理时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.handlerTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endHandlerTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.handlerTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endHandlerTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.handlerTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endHandlerTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.handlerTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endHandlerTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.handlerTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endHandlerTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4" :offset="20">
                  <a-form-item field="btns" hide-label content-class=" flex justify-end">
                    <a-space :size="20">
                      <a-button
                        type="primary"
                        v-permission="getWorkOrderList"
                        html-type="submit"
                        @click="doRefresh(1)"
                        ><template #icon> <icon-search /></template>搜索</a-button
                      >
                      <a-button v-permission="getWorkOrderList" @click="resetSeach"
                        ><template #icon>
                          <icon-sync theme="outline" size="14" />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>重置</template></a-button
                      >
                    </a-space>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </template>
        </TableHeader>
      </template>
      <template #table-config>
        <a-space :size="20">
          <a-button
            type="primary"
            v-permission="addWorkOrder"
            @click="orderInfo.addOrderVisible = true"
          >
            <!-- Use the default slot to avoid extra spaces -->
            <template #default>新建</template>
          </a-button>
        </a-space>
        <a-space :size="20">
          <TableConfig
            @update-border="onUpdateBorder"
            @update-striped="onUpdateStriped"
            @refresh="doRefresh"
          />
        </a-space>
      </template>
      <template #default>
        <a-table
          :stripe="(tables.striped as boolean)"
          :loading="tables.tableLoading"
          :data="table.dataList"
          :pagination="false"
          :column-resizable="true"
          :rowKey="rowKey"
          :columns="tableColumns.list"
          table-layout-fixed
          hide-expand-button-on-empty
          :default-expand-all-rows="true"
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumns.list"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'state'" #cell="{ record }">
                <span
                  v-for="(items, index) in treeData.list"
                  :key="index"
                  v-show="record.state == items.type"
                >
                  <a-tag v-if="items.name == '已完结'" color="green"> {{ items.name }}</a-tag>
                  <a-tag v-if="items.name == '待处理'" color="red"> {{ items.name }}</a-tag>
                  <a-tag v-if="items.name == '处理中'" color="arcoblue"> {{ items.name }}</a-tag>
                  <a-tag v-if="items.name == '已处理'" color="arcoblue"> {{ items.name }}</a-tag>
                </span>
              </template>

              <template v-if="item.key === 'handlerTime'" #cell="{ record }">
                <span>
                  {{ record.handlerTime ? record.handlerTime : '---' }}
                </span>
              </template>
              <template v-if="item.key === 'typeName'" #cell="{ record }">
                <span
                  v-for="(items, index) in treeData.typeList"
                  :key="index"
                  v-show="record.typeId == items.id"
                >
                  {{ items.name }}
                </span>
              </template>
              <template v-if="item.key === 'systemName'" #cell="{ record }">
                <span>
                  {{ record.system.systemName }}
                </span>
              </template>
              <template v-if="item.key === 'versionName'" #cell="{ record }">
                <span>
                  {{ record.systemVersion.versionName }}
                </span>
              </template>
              <template v-if="item.key === 'user'" #cell="{ record }">
                <span v-if="record.user">
                  {{ record.user.userName }}
                </span>
                <span v-else>---</span>
              </template>

              <template v-if="item.key === 'actions'" #cell="{ record }">
                <a-space>
                  <a-button
                    v-permission="getHandlerInfo"
                    size="small"
                    type="text"
                    class="butten"
                    @click="infoDepartments(record)"
                  >
                    详情
                  </a-button>
                  <a-button
                    v-permission="HandlerInfo"
                    size="small"
                    status="success"
                    type="text"
                    class="butten"
                    @click="chuliDetails(record)"
                  >
                    回复
                  </a-button>
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </template>
      <template #footer>
        <TableFooter ref="tableFooterRef" :pagination="pagination" position="end" />
      </template>
    </TableBody>
    <!-- 工单详情 -->
    <a-modal
      v-model:visible="ziliaovisible"
      @before-close="ziliaovisible = false"
      width="600px"
      title="工单详情"
      :mask-closable="false"
      title-align="start"
      :body-style="{}"
    >
      <a-spin :loading="loadingziliao" tip="加载中····" style="width: 100%">
        <a-descriptions
          layout="inline-horizontal"
          :column="2"
          :label-style="{
            width: '68px',
            color: 'var(--color-text-1)',
            textAlign: 'left',
            height: '38px',
          }"
          :value-style="{ textAlign: 'left' }"
        >
          <a-descriptions-item label="订单ID" :span="2">
            <span style="color: #165dff"> {{ orderInfo.info.id }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="工单标题" :span="2">
            {{ orderInfo.info.title }}
          </a-descriptions-item>
          <a-descriptions-item label="系统名称">
            {{ orderInfo.info.system.systemName }}
          </a-descriptions-item>
          <a-descriptions-item label="系统版本">
            {{ orderInfo.info.systemVersion.versionName }}
          </a-descriptions-item>

          <a-descriptions-item label="工单类型">
            <span style="width: 100%; text-align: center; display: inline-block; color: red">
              {{ orderInfo.info.typeName }}
            </span>
          </a-descriptions-item>
          <a-descriptions-item label="处理人员">
            {{ orderInfo.info.user ? orderInfo.info.user.userName : '---' }}
          </a-descriptions-item>
          <a-descriptions-item label="创建时间">
            {{ orderInfo.info.addTime }}
          </a-descriptions-item>
          <a-descriptions-item label="处理时间">
            {{ orderInfo.info.handlerTime ? orderInfo.info.handlerTime : '---' }}
          </a-descriptions-item>
        </a-descriptions>
        <div style="display: flex; justify-content: space-between; align-items: flex-start">
          <div style="min-width: 68px">工单内容</div>
          <div
            style="
              flex: 1;
              background-color: var(--color-fill-2);
              border-radius: 10px;
              min-height: 200px;
              padding: 10px 10px;
              box-sizing: border-box;
            "
            v-html="orderInfo.info.content"
          ></div>
        </div>
      </a-spin>
      <template #footer style="display: none">
        <div></div>
      </template>
    </a-modal>

    <a-modal
      width="800px"
      v-model:visible="orderInfo.addOrderVisible"
      title-align="start"
      :mask-closable="false"
      @cancel="beforeCloseForm"
    >
      <template #title> 新建工单 </template>
      <a-form
        ref="infoRef"
        :model="orderInfo.templatesForm"
        :auto-label-width="true"
        :labelCol="{ span: 4 }"
      >
        <a-form-item
          label="工单标题"
          field="title"
          :rules="[{ required: true, message: '请输入工单标题' }]"
        >
          <a-input
            placeholder="请输入工单标题"
            v-model.trim="orderInfo.templatesForm.title"
            allow-clear
          />
        </a-form-item>
        <a-form-item
          label="工单类型"
          field="typeId"
          :rules="[{ required: true, message: '请选择工单类型' }]"
        >
          <a-select
            class="width100"
            v-model="orderInfo.templatesForm.typeId"
            placeholder="请选择工单类型"
            allow-clear
          >
            <a-option v-for="(item, index) in treeData.typeList" :key="index" :value="item.id">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="工单内容"
          field="content"
          :rules="[{ required: true, message: '请输入回复内容' }]"
          style="width: 100%"
        >
          <div style="border: 1px solid #ccc">
            <Toolbar
              :editor="editorRef1"
              style="border-bottom: 1px solid #ccc"
              :default-config="toolbarConfig"
            />
            <Editor
              v-model="orderInfo.templatesForm.content"
              :default-config="editorConfig"
              class="editor_custom"
              style="height: 332px; overflow-y: hidden"
              @on-created="handleCreated1"
              @on-change="handleChange"
              @on-destroyed="handleDestroyed"
              @on-focus="handleFocus"
              @on-blur="handleBlur"
              @custom-alert="customAlert"
              @custom-paste="customPaste"
            />
          </div>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="beforeCloseForm">取消</a-button>
          <a-button type="primary" @click="handleSubmitTags">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 处理工单 -->
    <a-modal
      v-model:visible="chuliVisible"
      @before-close="chuliVisible = false"
      width="800px"
      title="工单详情"
      :mask-closable="false"
      title-align="start"
      :body-style="{}"
    >
      <a-timeline :reverse="isReverse">
        <a-collapse
          :bordered="false"
          @change="changeItem"
          expand-icon-position="right"
          :active-key="orderInfo.activeKey"
        >
          <a-timeline-item v-for="(item, index) in orderInfo.handlerList.workOrderHandlerList">
            <div class="timeLineBox">
              <div class="heads">
                <div class="names">{{
                  item.handlerUserName
                    ? item.handlerUserName
                    : orderInfo.handlerList.system.systemName
                }}</div>
                <div class="times">处理时间：{{ item.addTime }}</div>
              </div>

              <a-collapse-item header="回复内容" :key="index">
                <div class="contents" v-html="item.content"> </div>
              </a-collapse-item>
            </div>
          </a-timeline-item>
        </a-collapse>
      </a-timeline>
      <a-form
        style="margin-top: 10px"
        ref="userForm"
        :auto-label-width="true"
        :model="orderInfo.subForm"
      >
        <a-form-item
          hide-label
          field="content"
          :rules="[{ required: true, message: '请输入回复内容' }]"
          style="width: 100%"
        >
          <div style="border: 1px solid #ccc">
            <Toolbar
              :editor="editorRef"
              style="border-bottom: 1px solid #ccc"
              :default-config="toolbarConfig"
            />
            <Editor
              v-model="orderInfo.subForm.content"
              :default-config="editorConfig"
              class="editor_custom"
              style="height: 332px; overflow-y: hidden"
              @on-created="handleCreated"
              @on-change="handleChange"
              @on-destroyed="handleDestroyed"
              @on-focus="handleFocus"
              @on-blur="handleBlur"
              @custom-alert="customAlert"
              @custom-paste="customPaste"
            />
          </div>
        </a-form-item>
      </a-form>

      <template #footer>
        <a-space>
          <a-button @click="handleCancel">取消</a-button>
          <a-button type="primary" @click="handleBeforeOk">确定</a-button>
        </a-space>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  import {
    getWorkOrderList,
    getWorkOrderState,
    getWorkOrderType,
    getOrderDetail,
    getHandlerInfo,
    HandlerInfo,
    addWorkOrder,
  } from '@/api/url.ts'
  import { get, post, formpost } from '@/api/http'
  import { useRoute, useRouter } from 'vue-router'
  import { Form, Message, Modal } from '@arco-design/web-vue'
  import { usePagination, useRowKey, useTable } from '@/hooks/table'
  import { onMounted, reactive, ref, onBeforeUnmount, shallowRef, computed } from 'vue'
  import useCommonStore from '@/store/modules/common'
  import _ from 'lodash-es'
  const props = defineProps({
    modelValue: {
      type: String,
      default: null,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  })
  const router = useRouter()
  const route = useRoute()
  const listKey = ref('1')
  const useCommon = useCommonStore()
  const table = useTable()
  const pagination = usePagination(doRefresh)
  const loading = ref(false)
  const seachForm = ref()
  const ziliaovisible = ref(false)
  const chuliVisible = ref(false)
  const loadingziliao = ref(false)
  const form = reactive({
    //部门名称
    id: '',
    title: '',
    systemName: '',
    systemVersionId: '',
    typeId: '',
    state: '',
    createTime: '',
    endCreateTime: '',
    handlerTime: '',
    endHandlerTime: '',
  })

  const tables = reactive({
    tableLoading: false,
    bordered: false,
    striped: false,
    expand: [1],
    isExpand: false,
  })

  const treeData: any = reactive({
    list: [],
    typeList: [],
    option: {},
  })

  const tableColumns: any = reactive({
    templateList: [
      {
        title: '类型名称',
        key: 'name',
        dataIndex: 'name',
        align: 'left',
        checked: true,
        width: 120,
      },

      {
        title: '操作',
        key: 'actions',
        dataIndex: 'actions',
        align: 'left',
        checked: true,
        width: 50,
        fixed: 'right',
      },
    ],
    list: [
      {
        title: '工单ID',
        key: 'id',
        dataIndex: 'id',
        align: 'center',
        width: 80,
        checked: true,
      },
      {
        title: '工单标题',
        key: 'title',
        dataIndex: 'title',
        align: 'center',
        checked: true,
      },
      {
        title: '处理人员',
        key: 'user',
        dataIndex: 'user',
        align: 'center',
        width: 120,
        checked: true,
      },
      {
        title: '工单类型',
        key: 'typeName',
        dataIndex: 'typeName',
        align: 'center',
        width: 300,
        checked: true,
      },
      {
        title: '工单状态',
        key: 'state',
        dataIndex: 'state',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '创建时间',
        key: 'addTime',
        dataIndex: 'addTime',
        align: 'center',
        checked: true,
        width: 190,
      },
      {
        title: '处理时间',
        key: 'handlerTime',
        dataIndex: 'handlerTime',
        align: 'center',
        checked: true,
        width: 190,
      },
      {
        title: '操作',
        key: 'actions',
        dataIndex: 'actions',
        align: 'center',
        checked: true,
        width: 120,
        fixed: 'right',
      },
    ],
  })
  const orderInfo: any = reactive({
    info: {
      systemVersion: {},
      system: {},
    },
    showType: false,
    addOrderVisible: false,
    handlerList: {
      workOrderHandlerList: [],
    },
    templatesList: [],
    templatesForm: {
      title: '',
      typeId: '',
      content: '',
    },
    activeKey: null,
    subForm: { content: '' },
  })
  const rowKey = useRowKey('id')

  const resetSeach = () => {
    seachForm.value.resetFields()
    doRefresh(1)
  }

  const infoDepartments = (val: any) => {
    // ziliaovisible.value = true
    // orderInfo.info = val
    router.push({ path: '/setting/work/orderDetail', query: { id: val.id } })
  }
  const infoRef = ref()
  const beforeCloseForm = () => {
    infoRef.value?.resetFields()
    orderInfo.addOrderVisible = false
  }

  const userForm = ref<typeof Form>()
  const handleBeforeOk = () => {
    console.log(orderInfo.subForm)
    post({
      url: HandlerInfo,
      data: () => {
        return {
          ...orderInfo.subForm,
        }
      },
    }).then((res) => {
      if (res.code == 0) {
        Message.success(res.msg)
        handleCancel()
        doRefresh()
      }
    })
  }
  const handleCancel = () => {
    userForm.value?.resetFields()
    chuliVisible.value = false
  }
  const changeItem = (e) => {
    console.log(e)
    orderInfo.activeKey = e
  }

  const chuliDetails = (val: any) => {
    chuliVisible.value = true
    get({
      url: getHandlerInfo,
      data: () => {
        return {
          id: val.id,
        }
      },
    }).then((res) => {
      orderInfo.handlerList = res.data
      orderInfo.subForm.id = res.data.id
      orderInfo.activeKey = orderInfo.handlerList.workOrderHandlerList.length - 1
    })
    orderInfo.info = val
  }

  const getVendorList = () => {
    get({
      url: getWorkOrderState,
      data: () => {
        return {}
      },
    }).then((res) => {
      treeData.list = res.data
      return res.data
    })
  }
  const getVendorLists = () => {
    get({
      url: getWorkOrderType,
      data: () => {
        return {}
      },
    }).then((res) => {
      treeData.typeList = res.data
    })
  }

  function onUpdateBorder(isBordered: boolean) {
    tables.bordered = isBordered
  }

  function onUpdateStriped(isStriped: boolean) {
    tables.striped = isStriped
  }
  const handleSubmitTags = () => {
    infoRef.value.validate((error: any) => {
      if (!error) {
        post({
          url: addWorkOrder,
          data: () => {
            return {
              ...orderInfo.templatesForm,
            }
          },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            orderInfo.addOrderVisible = false
            infoRef.value?.resetFields()
            doRefresh()
          } else {
            Message.error(res.msg)
          }
        })
      }
    })
  }
  function doRefresh(value?: number) {
    tables.tableLoading = true
    if (value) {
      pagination.page = value
    }
    get({
      url: getWorkOrderList,
      data: () => {
        return {
          page: pagination.page,
          size: pagination.pageSize,
          ...form,
        }
      },
    }).then((res) => {
      tables.tableLoading = false
      table.handleSuccess(res.data.list)
      pagination.setTotalSize((res.data as any).totalSize)
      return res.data
    })
  }

  //跟踪API开始时间限制结束时间
  function changeTraceEnd(time: any) {
    return time.getTime() > new Date(form.endTime).getTime() //大于结束时间的不选
  }
  //跟踪API结束时间限制开始时间
  function changeTraceStart(time: any) {
    return time.getTime() < new Date(form.startTime).getTime() //小于开始时间的不选
  }
  const headerObj = ref({})
  const AuthorizationHeader = () => {
    // if (tokenStore.token != '') {
    //     if (tokenStore.token != '0') {
    //         headerObj.value.Authorization =  tokenStore.token
    //     } else {
    //         headerObj.value.Authorization = userOutsideStore.tokenHead + userOutsideStore.token
    //     }
    // }
  }
  // 编辑器实例，必须用 shallowRef，重要！
  const editorRef = shallowRef()
  const editorRef1 = shallowRef()
  const toolbarConfig = {
    excludeKeys: ['group-video', 'insertImage', 'insertLink', 'emotion'], // 此处不需要的工具栏选项
  }

  const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: {},
    hoverbarKeys: {
      image: {
        // 清空 image 元素的 hoverbar
        menuKeys: [],
      },
    },
  }

  // 上传图片
  editorConfig.MENU_CONF['uploadImage'] = {
    // 上传图片的接口地址
    server: '/app/file/upload',
    // form-data fieldName ，默认值 'wangeditor-uploaded-image'
    fieldName: 'file',

    // 单个文件的最大体积限制，默认为 2M
    maxFileSize: 5 * 1024 * 1024, // 5M

    // 最多可上传几个文件，默认为 100
    maxNumberOfFiles: 20,

    // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
    allowedFileTypes: ['image/png,image/jpeg,image/jpg'],

    // 小于该值就插入 base64 格式（而不上传），默认为 0
    base64LimitSize: 0, // 5kb
    // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
    // meta: {
    //     token: 'xxx',
    //     otherKey: 'yyy'
    // },

    // 将 meta 拼接到 url 参数中，默认 false
    metaWithUrl: false,

    // 自定义增加 http  header
    headers: headerObj,

    // 跨域是否传递 cookie ，默认为 false
    withCredentials: true,

    // 超时时间，默认为 10 秒
    timeout: 5 * 1000, // 5 秒
    // 上传之前触发
    onBeforeUpload(file: { [s: string]: unknown } | ArrayLike<unknown>) {
      // file 选中的文件，格式如 { key: file }
      let fileObj = Object.values(file)[0].data
      const isJPG =
        fileObj.type == 'image/jpg' || fileObj.type == 'image/jpeg' || fileObj.type == 'image/png'
      if (!isJPG) {
        Message.error('图片只能是 JPG、GIF、PNG 格式!')
      }
      // 判断图片宽高
      // 定义 filereader对象

      // 判断图片大小
      let isLt = fileObj.size / 1024 / 1024 < 5 // 判断是否小于5M
      if (!isLt) {
        Message.error('图片大小不能超过5M! 请重新上传')
      }
      if (!isJPG) {
        return false
      } else if (!isLt) {
        return false
      } else {
        return file
      }
      // 可以 return
      // 1. return file 或者 new 一个 file ，接下来将上传
      // 2. return false ，不上传这个 file
    },
    // 上传进度的回调函数
    onProgress(progress: any) {
      // progress 是 0-100 的数字
      console.log('progress', progress)
    },
    // 单个文件上传成功之后
    onSuccess(file: { name: any }, res: any) {
      console.log(`${file.name} 上传成功`, res)
    },
    // 自定义插入图片
    customInsert(
      res: { data: { path: string } },
      insertFn: (arg0: string, arg1: string, arg2: string) => void
    ) {
      console.log(window.location.host)
      // res 即服务端的返回结果
      // 从 res 中找到 url alt href ，然后插图图片
      insertFn('http://' + window.location.host + res.data.path, '', '')
    },
    // 单个文件上传失败
    // onFailed(file, res) {
    //     console.log(`${file.name} 上传失败`, res)
    // },
    // 上传错误，或者触发 timeout 超时
    onError(file: { name: any }, err: any, res: any) {
      console.log(`${file.name} 上传出错`, err, res)
    },
  }
  // 上传视频
  editorConfig.MENU_CONF['uploadVideo'] = {
    // 上传视频接口地址
    // server: usUploadStore().uploadVideo,
    // form-data fieldName ，默认值 'wangeditor-uploaded-video'
    fieldName: 'file',

    // 单个文件的最大体积限制，默认为 10M
    maxFileSize: 5 * 1024 * 1024, // 5M

    // 最多可上传几个文件，默认为 5
    maxNumberOfFiles: 3,

    // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
    allowedFileTypes: ['video/mp4'],

    // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
    // meta: {
    //     token: 'xxx',
    //     otherKey: 'yyy'
    // },

    // 将 meta 拼接到 url 参数中，默认 false
    metaWithUrl: false,

    // 自定义增加 http  header
    headers: headerObj,

    // 跨域是否传递 cookie ，默认为 false
    withCredentials: true,

    // 超时时间，默认为 30 秒
    timeout: 15 * 1000, // 15 秒

    // 视频不支持 base64 格式插入
    // 自定义插入视频
    customInsert(res: { data: { url: any } }, insertFn: (arg0: any) => void) {
      // res 即服务端的返回结果

      // 从 res 中找到 url ，然后插入视频
      insertFn(res.data.url)
    },
    // 上传之前触发
    onBeforeUpload(file: any) {
      // file 选中的文件，格式如 { key: file }
      return file

      // 可以 return
      // 1. return file 或者 new 一个 file ，接下来将上传
      // 2. return false ，不上传这个 file
    },
    // 上传进度的回调函数
    onProgress(progress: any) {
      // progress 是 0-100 的数字
      console.log('progress', progress)
    },
    // 单个文件上传成功之后
    onSuccess(file: { name: any }, res: any) {
      console.log(`${file.name} 上传成功`, res)
    },
    // 单个文件上传失败
    onFailed(file: { name: any }, res: any) {
      console.log(`${file.name} 上传失败`, res)
    },
    // 上传错误，或者触发 timeout 超时
    onError(file: { name: any }, err: any, res: any) {
      console.log(`${file.name} 上传出错`, err, res)
    },
  }
  // 组件销毁时，也及时销毁编辑器，重要！
  onBeforeUnmount(() => {
    const editor = editorRef.value
    const editor1 = editorRef1.value
    if (editor == null) return
    editor.destroy()
    if (editor1 == null) return
    editor1.destroy()
  })

  // 编辑器回调函数
  const handleCreated = (editor: { disable: () => void; enable: () => void }) => {
    editorRef.value = editor // 记录 editor 实例，重要！
    if (props.disabled) {
      editor.disable()
    } else {
      editor.enable()
    }
  }
  // 编辑器回调函数
  const handleCreated1 = (editor: { disable: () => void; enable: () => void }) => {
    editorRef1.value = editor // 记录 editor 实例，重要！
    if (props.disabled) {
      editor.disable()
    } else {
      editor.enable()
    }
  }
  const handleChange = (editor: any) => {
    return editor
  }
  const handleDestroyed = (editor: any) => {
    // console.log('destroyed', editor)
    return editor
  }
  const handleFocus = (editor: any) => {
    //console.log('focus', editor)
    return editor
  }
  const handleBlur = (editor: any) => {
    //console.log('blur', editor)
    return editor
  }
  const customAlert = (info: any, type: any) => {
    alert(`【自定义提示】${type} - ${info}`)
  }
  const customPaste = (editor: any, event: any, callback: (arg0: boolean) => void) => {
    console.log('ClipboardEvent 粘贴事件对象', event)

    // 自定义插入内容
    // editor.insertText('xxx')

    // 返回值（注意，vue 事件的返回值，不能用 return）
    // callback(false) // 返回 false ，阻止默认粘贴行为
    callback(true) // 返回 true ，继续默认的粘贴行为
  }
  onMounted(async () => {
    getVendorList()
    getVendorLists()
    doRefresh()
  })
</script>

<style lang="less" scoped>
  :deep(.arco-table-cell-expand-icon) {
    justify-content: center;
  }
  // :deep(.arco-collapse-item-header-right) {
  //   padding-left: 0px;
  // }
  :deep(.arco-collapse-item-content) {
    padding: 0px !important;
    background: none;
    box-sizing: border-box;
  }
  :deep(.arco-collapse-item-header) {
    border: none;
  }
  .butten {
    padding: 0px 4px;
  }
  :deep(.arco-tabs-nav-tab) {
    background-color: var(--color-bg-1);
    padding: 20px 0;
    border-radius: 10px;
  }

  :deep(.arco-tabs-content::before) {
    height: 0px !important;
  }

  :deep(.arco-tabs-tab) {
    margin: 0 20px;
    padding: 0;
    padding-bottom: 5px;
  }
  .timeLineBox {
    width: 100%;
    .heads {
      display: flex;
      margin-bottom: 10px;
      justify-content: space-between;
      align-items: center;
      .names {
        color: rgb(var(--arcoblue-5));
      }
    }
    .contents {
      width: 100%;
      display: inline-block;
      min-height: 200px;
      border-radius: 10px;
      padding: 10px;
      box-sizing: border-box;
      background-color: rgb(var(--arcoblue-1));
    }
  }
</style>
